<template>
	<div>
		<div class="address">
			<div>
				<p>您当前所在位置</p>
				<router-link to="/" class="link">新建返修单-个定</router-link>
			</div>
		</div>
		<div class="roder-details">
			<div class="info">
				<h3 class="title">订单信息</h3>
				<div class="list">
					<div class="list-div">
						<div>
							<p>订单编号</p>
							<span>33643QXA0034</span>
						</div>
						<div>
							<p>订单类型</p>
							<span>团体定制</span>
						</div>
						<div>
							<p>订单类型</p>
							<span>团体定制</span>
						</div>

						<div>
							<p>订单类型</p>
							<span>团体定制</span>
						</div>

					</div>

				</div>

				<h3 class="title">基本信息</h3>
				<div class="list">
					<div class="list-div">
						<div>
							<p>客户编号</p>
							<span>1123246</span>
						</div>

						<div>
							<p>面料来源</p>
							<span>厂家面料</span>
						</div>

						<div>
							<p>快递方式</p>
							<span>顺丰（慢）</span>
						</div>
						<div>
							<p>客户性别</p>
							<span>男性</span>
						</div>
						<div>
							<p>面料来源</p>
							<span>正常业务</span>
						</div>
						<div>
							<p>地址</p>
							<span>宁波市鄞州区光华路三方大厦</span>
						</div>
						<div>
							<p>客户姓名</p>
							<span>李朝阳</span>
						</div>
						<div>
							<p>
								包装方式</p>
							<span>扁平箱</span>
						</div>
					</div>

				</div>

				<h3 class="title">产品信息</h3>
				<div class="tabss">
					<p :class="{'active':idx == '1'}" @click="select(1)">男-上衣</p>
					<p :class="{'active':idx == '2'}" @click="select(2)">男-裤</p>
					<p :class="{'active':idx == '3'}" @click="select(3)">男-大衣</p>
					<p :class="{'active':idx == '4'}" @click="select(4)">男-马甲</p>
				</div>

				<h3 class="title">返修</h3>
				<div class="tabss-content">
					<div v-if="idx == 1">
						<div class="inputs1">
							<p>衣长</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>后背宽</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>胸围</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>腰围</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>下摆</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>肩宽</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>袖长</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>袖窿深</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>
								袖肥</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>袖口</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>前胸宽</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p style="width:140px">后领下挖</p>
							<input type="text">
							<span>cm</span>
						</div>

					</div>
					<div v-if="idx == 2">
						<div class="inputs1">
							<p>裤长</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>裤脚</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>腿围</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>腰围</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>臀围</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>直档</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>膝围</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>前浪</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>
								后浪</p>
							<input type="text">
							<span>cm</span>
						</div>


					</div>
					<div v-if="idx == 3">
						<div class="inputs1">
							<p>衣长</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>下摆</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>胸围</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>腰围</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>肩宽</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>袖长</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>袖肥</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>袖口</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>
								袖窿深</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p style="width: 140px;">
								后领下挖</p>
							<input type="text">
							<span>cm</span>
						</div>
					
					
					</div>
					<div v-if="idx == 4">
						<div class="inputs1">
							<p>衣长</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>下摆</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>胸围</p>
							<input type="text">
							<span>cm</span>
						</div>
						<div class="inputs1">
							<p>腰围</p>
							<input type="text">
							<span>cm</span>
						</div>
						
					
					
					</div>
				</div>

				<h3 class="title">售后原因</h3>
				<a-select default-value="lucy" style="width: 120px" @change="handleChange">
					<a-select-option value="jack">
						退货
					</a-select-option>
					<a-select-option value="lucy">
						换货
					</a-select-option>

				</a-select>
				<div style="width:530px;margin-top:10px;margin-bottom: 10px;">
					<a-textarea placeholder="Basic usage" :rows="4" :auto-size="{ minRows: 3, maxRows: 5 }" />
				</div>
				<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture-card" :file-list="fileList"
				 @preview="handlePreview" @change="handleChange">
					<div v-if="fileList.length < 8">
						<a-icon type="plus" />
						<div class="ant-upload-text">
							Upload
						</div>
					</div>
				</a-upload>
				<h3 class="title">返修金额</h3>
				<div class="list">
					<div class="list-div">
						<div>
							<p>返修金额</p>
							<span class="b">1200元</span>
						</div>
						
					</div>
						
				</div>
				<div class="btn10">提交订单</div>
			</div>
		</div>

	</div>
</template>

<script>
	function getBase64(file) {
		return new Promise((resolve, reject) => {
			const reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = () => resolve(reader.result);
			reader.onerror = error => reject(error);
		});
	}
	// @ is an alias to /src
	import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
	export default {
		name: 'MyAfterSales',
		data() {
			return {
				locale,
				previewVisible: false,
				previewImage: '',
				fileList: [],
				idx: 1,
			}
		},
		methods: {
			select: function(i) {
				this.idx = i
			},
			handleCancel() {
				this.previewVisible = false;
			},
			async handlePreview(file) {
				if (!file.url && !file.preview) {
					file.preview = await getBase64(file.originFileObj);
				}
				this.previewImage = file.url || file.preview;
				this.previewVisible = true;
			},
			handleChange({
				fileList
			}) {
				this.fileList = fileList;
			},
		},
		mounted() {
			// 切换页面时滚动条自动滚动到顶部
			window.scrollTo(0, 0);
		}
	}
</script>

<style scoped lang="scss">
	.roder-details {
		width: 80%;
		margin: 0 auto;
		background: #fff;
		margin-top: 20px;
		padding: 20px 35px;

		.inputs1 {
			width: 207px;
			height: 42px;
			display: flex;
			align-items: center;
			border: 1px solid #CCCCCC;
			border-radius: 3px;
			overflow: hidden;
			margin-bottom: 20px;
			margin-right: 20px;

			p {
				padding: 0 5px;
				color: #fdf538;
				background-color: #575757;
				font-size: 15px;
				min-width: 58px;
				text-align: center;
				line-height: 42px;
				border-radius: 3px;
				margin-bottom: 0px;
			}

			input {
				width: 100%;
				height: 100%;
				border: none;
				outline: none;
				padding-left: 10px;
			}

			span {
				color: #333;
				font-size: 13px;
				padding-right: 10px;
			}
		}

		.tabss-content>div {
			width: 910px;
			flex-wrap: wrap;
			display: flex;
		}

		.tabss {
			display: flex;

			p {
				width: 112px;
				height: 34px;
				margin-right: 20px;
				background-color: rgba(249, 249, 249, 1);
				color: #333;
				font-size: 15px;
				line-height: 34px;
				text-align: center;
				cursor: pointer;

				&.active {
					color: rgb(253, 245, 56);
					background-color: rgba(87, 87, 87, 1);
					font-weight: 700;
				}
			}
		}

		.btn10 {
			width: 112px;
			height: 40px;
			background-color: rgba(13, 221, 108, 1);
			border-radius: 3px;
			line-height: 40px;
			text-decoration: none;
			color: #fff;
			text-align: center;
			display: block;

		}

		.btns {
			display: flex;
			justify-content: space-between;
			height: 36px;
			align-items: center;
			margin-bottom: 50px;

			div {
				display: flex;
			}

			a.b1 {
				background-color: #393939;
				width: 122px;
				height: 36px;
				color: rgb(255, 238, 58);
				font-size: 15px;
				line-height: 36px;
				text-align: center;
				display: block;
				border-radius: 3px;
			}

			a.b2 {
				background-color: #393939;
				width: 90px;
				height: 36px;
				color: #fff;
				font-size: 15px;
				line-height: 36px;
				text-align: center;
				display: block;
			}

			a.b3 {
				background-color: rgba(242, 242, 242, 1);
				width: 90px;
				height: 36px;
				color: #444;
				font-size: 15px;
				line-height: 36px;
				text-align: center;
				display: block;
			}
		}

		.info {
			padding-top: 30px;

			.inputs {
				div {
					display: flex;
					margin-bottom: 10px;

					p {
						width: 112px;
						padding: 2px 2px 2px 24px;
						background-color: rgba(249, 249, 249, 1);
						font-size: 15px;
						color: #333;
						display: flex;
						height: 36px;
						align-items: center;
						margin: 0px !important;
					}

					span {
						width: 114px;
						padding: 2px 2px 2px 24px;
						background-color: rgba(255, 255, 255, 1);
						font-size: 15px;
						color: #333;
						display: flex;
						font-weight: 100;
						height: 36px;
						align-items: center;
						margin-left: 3px;
						border-width: 1px;
						border-style: solid;
						cursor: pointer;
						border-color: rgba(242, 242, 242, 1);

						&:hover {
							font-weight: 600;
							color: #fff;
							background-color: rgba(159, 159, 159, 1);
						}
					}

					b {
						width: 61px;
						cursor: pointer;
						text-align: center;
						background-color: rgba(249, 249, 249, 1);
						font-size: 15px;
						color: #333;
						display: flex;
						font-weight: 100;
						height: 36px;
						align-items: center;
						justify-content: center;

						&:hover {
							font-weight: 600;
							color: #fff;
							background-color: rgba(159, 159, 159, 1);
						}
					}
				}
			}

			.img12 {
				border-width: 1px;
				border-style: solid;
				border-color: rgba(242, 242, 242, 1);
				width: 193px;
				min-width: 193px;
				margin-right: 30px;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;

				&>p:nth-child(2) {
					background-color: #4d4d4d;
					color: rgb(255, 236, 112);
					line-height: 16px;
					font-size: 13px;
					padding: 5px 13px;
					margin-bottom: 6px;
				}

				&>p:nth-child(3) {
					background-color: #4d4d4d;
					color: rgb(255, 236, 112);
					line-height: 16px;
					font-size: 13px;
					padding: 5px 10px;
				}

				img {
					width: 153px;
					height: 158px;
					position: relative;
					top: -10px;
				}
			}

			.table-css {
				position: relative;

				.bz {
					width: 447px;
					height: 63px;
					background: inherit;
					background-color: rgba(255, 221, 202, 1);
					position: absolute;
					right: 0px;
					top: -63px;
					display: flex;
					align-items: center;
					justify-content: center;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					flex-direction: column;

					p {
						width: 100%;
						color: rgb(251, 8, 8);
						font-size: 13px;
						padding-left: 10px;
						margin-bottom: 0px;
						line-height: 16px;
					}
				}
			}

			.btn {

				border-width: 0px;
				width: 112px;
				height: 40px;
				background: inherit;
				background-color: rgba(13, 221, 108, 1);
				border: none;
				border-radius: 3px;
				-moz-box-shadow: none;
				-webkit-box-shadow: none;
				box-shadow: none;
				font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
				font-weight: 500;
				font-style: normal;
				font-size: 15px;
				text-align: center;
				display: block;
				color: #fff;
				line-height: 40px;
				margin-top: 25px;
				margin-bottom: 60px;
				cursor: pointer;
			}

			.price {
				color: rgb(38, 38, 38);
				font-size: 16px;
				padding: 2px 2px 2px 24px;
				font-weight: 700;

				span {
					color: rgb(215, 1, 1);
				}

				margin: 35px 0px;
			}

			.price1 {
				color: rgb(38, 38, 38);
				font-size: 16px;
				font-weight: 400;
				padding: 2px 2px 2px 24px;

				span {
					color: rgb(215, 1, 1);
				}

				margin: 35px 0px;
			}

			.text1 {
				width: 533px;
				height: 105px;
				padding: 3px 2px 3px 2px;
				font-family: 'ArialMT', 'Arial';
				font-weight: 400;
				font-style: normal;
				font-size: 13px;
				text-decoration: none;
				letter-spacing: normal;
				color: #000000;
				vertical-align: none;
				text-align: left;
				text-transform: none;
				background-color: #f9f9f9;
				border-color: transparent;
				resize: none;
				outline: none;
				padding: 10px;
			}

			.tabs {
				.tab {
					margin-bottom: 10px;
					display: flex;

					h5 {
						width: 112px;
						padding: 2px 2px 2px 24px;
						background-color: rgba(249, 249, 249, 1);
						font-size: 15px;
						color: #333;
						display: flex;
						height: 36px;
						align-items: center;
						margin: 0px !important;
						margin-right: 6px !important;
					}

					.tab-content {
						height: 36px;
						display: flex;

						p {
							border: 1px solid rgb(242, 242, 242);
							min-width: 100px;
							height: 36px;
							height: 36px;
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 0 15px;
							color: #333;
							font-size: 15px;
							margin-right: 6px;

							cursor: pointer;

							b {
								display: none;
								font-weight: 700;
							}

							&.active {
								color: rgb(255, 236, 112);
								font-weight: 700;
								background-color: rgb(74, 74, 74);
							}

							&:hover {
								b {
									display: block;
								}

								span {
									display: none;
								}
							}
						}
					}
				}
			}

			h3.title {
				height: 30px;
				line-height: 30px;
				position: relative;
				font-size: 16px;
				color: #333;
				font-weight: 700;
				margin-bottom: 25px;

				&:after {
					position: absolute;
					height: 100%;
					width: 5px;
					position: absolute;
					left: -35px;
					top: 0px;
					background-color: rgba(74, 74, 74, 1);
					content: "";
				}
			}

			.title2 {
				width: 112px;
				padding: 2px 2px 2px 24px;
				font-size: 15px;
				color: #333;
				display: flex;
				height: 36px;
				align-items: center;
				margin: 0px !important;
				margin-bottom: 10px !important;
				font-weight: 700;
			}

			.list {
				margin-bottom: 20px;

				.list-div {
					display: flex;
					flex-wrap: wrap;

					div {
						width: 33.3%;
						display: flex;
						height: 36px;
						align-items: center;

						p {
							width: 112px;
							padding: 2px 2px 2px 24px;
							background-color: rgba(249, 249, 249, 1);
							font-size: 15px;
							color: #333;
							display: flex;
							height: 36px;
							align-items: center;
							margin: 0px !important;
						}

						span {
							width: calc(100% - 112px);
							padding: 2px 2px 2px 24px;
							font-size: 15px;
							color: #333;
							display: flex;
							height: 36px;
							align-items: center;

							&.b {
								font-weight: 700;
							}
						}
					}
				}
			}
		}
	}
</style>
